<template>
  <transition appear name="el-zoom-in-center">
    <div :class="classes" @click="click">
      <slot></slot>
      <div v-show="!lock" class="c-tag-close" @click="close"></div>
    </div>
  </transition>
</template>
<script>
export default {
  name: 'CAdmineaderTag',
  components: {},
  props: {
    index: { type: Number, default: 0 },
    active: { type: Boolean, default: false },
    lock: { type: Boolean, default: false }
  },
  data() {
    return {}
  },
  computed: {
    classes() {
      const { active, lock } = this
      return ['c-tag', active && 'c-tag-active', lock && 'c-tag-lock']
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    activeClass() {
      this.classes.push('c-tag-active')
    },
    close(event) {
      event.stopPropagation()
      this.$emit('close', event)
    },
    click() {
      this.$emit('click', event)
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .c-admin-header {
    .c-tag {
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      padding: 0 26px 0 8px;
      height: 24px;
      line-height: 24px;
      transition: all 0.3s;
      border: 1px solid $--color-text-placeholder;
      color: $--color-info;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      margin-right: 8px;
      $tag-close: '.c-tag-close';
      #{$tag-close} {
        display: inline-block;
        @include wh(13px, 13px);
        position: absolute;
        font-size: 0;
        border-radius: 50%;
        right: 6px;
        top: 5px;
        transition: all 0.3s;
        &::before,
        &::after {
          content: '';
          @include wh(13px, 1px);
          position: absolute;
          background-color: $--color-info;
          top: 6px;
        }
        &::before {
          transform: scale(0.8) rotate(45deg);
        }
        &::after {
          transform: scale(0.8) rotate(-45deg);
        }
        &:hover {
          background-color: $--color-info;
          &::before,
          &::after {
            background-color: #fff;
          }
        }
      }
      &-active {
        border: 1px solid $--color-primary;
        background-color: $--color-primary;
        color: #fff;
        #{$tag-close} {
          &::before,
          &::after {
            background-color: #fff;
          }
          &:hover {
            &::before,
            &::after {
              background-color: $--color-primary;
            }
            background-color: #fff;
          }
        }
      }
      &-lock {
        padding: 0 8px;
      }
    }
  }
}
</style>
